<template>
	<view :class="currentTheme">
		<a-nabbar name="财务详情"/>
		<view class="u-padding-32">
			<item-box paddinglr="40">
				<label-box label="剧本名" labelWidth="160">
					<view class="text-order-time u-font-30 right-value">{{form.productName || ''}}</view>
				</label-box>
				<!-- <label-box label="开始时间" labelWidth="160">
					<view class="text-order-time u-font-30 right-value">{{form.startTime}}</view>
				</label-box> -->
				<label-box label="完成时间" labelWidth="160">
					<view class="text-order-time u-font-30 right-value">{{form.finishTime || ''}}</view>
				</label-box>
				<label-box label="DM" labelWidth="160">
					<view class="u-flex">
						<item-image :type="'1'" :img="form.dmAvatar"  :size="76"   />
						<text class="text-order-time u-font-30 u-margin-left-20">{{form.dmName || ''}}</text>
					</view>
				</label-box>
				<label-box label="DM抽成" labelWidth="160">
					<view class="u-flex">
						<view style="width: 200rpx;">
							<u-input maxlength="5" :disabled="disabled" type="number" :clearable="false" border 
						:borderColor="currentThemeObj.inputBorderColor" 
						 :placeholder-style="`color:${currentThemeObj.placeholderColor}`"
						placeholder=" " @input="getChange" v-model="form.proportion"></u-input>
						</view>
						<text class="u-font-30 content-desc-item u-margin-left-10">%</text>

             <view class="u-margin-left-70 u-font-26" @click="editHandle" style="color: #765CFE">修改</view>
					</view>
         
				</label-box>
				<label-box label="抽成金额" labelWidth="160">
					<view class="text-order-time u-font-30 right-value">￥{{proportionMoney}}</view>
				</label-box>
			</item-box>
		</view>
		<fixed-team>
			<view class="u-flex u-row-between u-flex-1">
				<view>
					<view class="u-flex u-font-24 text-order-time">
						<view>
							单价：¥{{form.price}}
						</view>
						<view class="u-margin-left-40">
							人数：{{form.payNum}}
						</view>
					</view>
					<view class="u-flex">
						<text class="u-font-32 text-bold box-title">合计：</text>
						<money :price="form.total" :color="currentThemeObj.primary" size="40"></money>
					</view>
				</view>
				<view>
					<item-btn @click="editMoney" width="380" height="88">保存</item-btn>
				</view>
			</view>
		</fixed-team>
	</view>
</template>

<script>
	import {getDetail,update} from '@/api/crud.js'
	export default{
		data(){
			return {
				apiModule:'shopApi',
				apiType:'incomeStatistics',
				form:{},
				edit:false
			}
		},
		computed: {
			disabled() {
				return this.$store.getters.loginForm.clerkRole== 'DM'
			},
			proportionMoney(){
				if(this.edit){
					const money = this.form.total * this.form.proportion / 100
					return money
				}
				return this.form.proportionMoney
			}
		},
		onLoad(option) {
			getDetail({},this.apiType,this.apiModule,option.id).then(res=>{
				this.form = res;
			})
		},
		methods: {
			editMoney() {
				update({id:this.form.id,proportion:this.form.proportion},this.apiType,this.apiModule).then(res=>{
					this.$u.toast('保存成功!')
					this.$u.route({
						type:"back"
					})
				})
			},
			getChange(){
				if(!this.edit){
					this.edit = true
				}
			},
      editHandle(){
        	update({id:this.form.id,proportion:this.form.proportion},this.apiType,this.apiModule).then(res=>{
					this.$u.toast('修改成功!')
				})
      }
		},
	}
</script>

<style scoped lang="scss">
	.fixed{
		&-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 55;
			background: #161324;
			border-top: 1rpx solid #6F6D78;
			line-height: 138rpx;
			box-sizing: border-box;
			padding:0 42rpx;
		}
		&-empty{
			height: 200rpx;
		}
	}
	.price{
		font-size: 50rpx;
	}
	.cn-code{
		font-size: 65rpx;
	}
	.right-value{
		line-height: 64rpx;
	}
</style>
